<!-- subpkg_consult/description/index.vue -->
<script>
	export default { name: 'SubpkgConsultDescriptionIndexPage' }
</script>

<script setup>
	// 单词：dep 部门, consult 问诊, illness 疾病, patient 患者

	import { computed, ref, watch } from 'vue'
	import useConsultStore from '@/stores/consult.js'

	const props = defineProps({
		type: String,
		illnessType: String,
		depId: String,
	})
	const consultStore = useConsultStore()
	// 表单信息
	const form = ref({
		// 表单数据
		data: {
			illnessDesc: '', // 病情描述
			illnessTime: 1, // 患病时长
			consultFlag: 0, // 是否就诊过 0-未就诊过, 1-就诊过
			pictures: [],
		},
		// 表单校验规则
		// rules: {}
	})

	// 恢复表单数据
	const huifulist = async () => {
		if (
			consultStore.illnessInfo.illnessDesc !== '' ||
			consultStore.illnessInfo.pictures.length > 0
		) {
			const res = await uni.showModal({
				title: '温馨提示',
				content: '是否恢复之前填写的病情信息',
				confirmText: '确定',
				confirmColor: '#16c2a3',
				cancelColor: '#848484',
			})
			if (res.confirm) {
				form.value.data = consultStore.illnessInfo
				consultStore.illnessInfo.illnessDesc = ''
				consultStore.illnessInfo.pictures = []
				consultStore.illnessInfo.illnessTime = 1
				consultStore.illnessInfo.consultFlag = 0
			} else {
				consultStore.illnessInfo.illnessDesc = ''
				consultStore.illnessInfo.pictures = []
				consultStore.illnessInfo.illnessTime = 1
				consultStore.illnessInfo.consultFlag = 0
			}
		}
	}
	huifulist()

	// 侦听form.value.data的变化实时存入pinia
	watch(
		[
			() => form.value.data.illnessDesc,
			() => form.value.data.illnessTime,
			() => form.value.data.consultFlag,
			() => form.value.data.pictures,
		],
		() => {
			consultStore.setIllnessInfo(form.value.data)
		}
	)
	// 给后端的数据
	const formData = computed(() => {
		const pictures = form.value.data.pictures.map((v) => ({
			id: v.uuid,
			url: v.url,
		}))
		return {
			...form.value.data,
			pictures,
		}
	})

	// 患病时长-可选项
	const illnessTimeOptions = [
		{ value: 1, text: '一周内' },
		{ value: 2, text: '一月内' },
		{ value: 3, text: '半年内' },
		{ value: 4, text: '半年以上' },
	]

	const consultFlagOptions = [
		{ value: 0, text: '没有就诊过' },
		{ value: 1, text: '就诊过' },
	]

	const goNextStep = () => {
		// 储存到pinia
		consultStore.setIllnessInfo(form.value.data)
		consultStore.setType(props.type)
		consultStore.setillnessType(props.illnessType)
		consultStore.setdepId(props.depId)
		// 跳转到下一页
		uni.navigateTo({ url: '/subpkg_consult/patient/index' })
	}
</script>

<template>
	<scroll-page>
		<view class="description-page">
			<!-- 在线医生 -->
			<view class="doctor-online">
				<image
					src="/static/uploads/doctor-avatar-2.png"
					class="doctor-avatar"
				/>
				<view class="doctor-info">
					<view class="name">在线医生</view>
					<view class="message">
						请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
					</view>
					<view class="tips">
						<text class="iconfont icon-shield"></text>
						内容仅医生可见
					</view>
				</view>
			</view>
			<!-- 患者信息 -->
			<view class="patient-info">
				<view class="description">
					<uni-easyinput
						v-model.trim="form.data.illnessDesc"
						type="textarea"
						:styles="{ backgroundColor: '#f6f6f6' }"
						:input-border="false"
						placeholder-style="font-size: 30rpx; color: #979797"
						placeholder="请详细描述您的病情,病情描述不能为空"
					/>
				</view>

				<view class="title">本次患病多久了？</view>
				<view class="tags">
					<text
						v-for="v of illnessTimeOptions"
						:key="v.value"
						class="tag"
						:class="{ active: v.value === form.data.illnessTime }"
						@click="form.data.illnessTime = v.value"
						>{{ v.text }}</text
					>
				</view>

				<view class="title">此次病情是否去医院就诊过？</view>
				<view class="tags">
					<text
						v-for="v of consultFlagOptions"
						:key="v.value"
						class="tag"
						:class="{ active: v.value === form.data.consultFlag }"
						@click="form.data.consultFlag = v.value"
						>{{ v.text }}</text
					>
				</view>
			</view>
			<!-- 上传图片 -->
			<view class="patient-picture">
				<uni-file-picker
					v-model="form.data.pictures"
					title="上传病情相关图片 (仅医生可见)"
					limit="8"
					:image-styles="{ width: '160rpx', height: '160rpx' }"
					file-extname="png,jpg,gif,webp"
				/>
			</view>
		</view>
		<!-- 下一步操作 -->
		<view class="next-step">
			<button
				class="uni-button"
				:disabled="form.data.illnessDesc === ''"
				@click="goNextStep"
			>
				下一步
			</button>
		</view>
	</scroll-page>
</template>

<style lang="scss">
	// subpkg_consult/description/index.scss
	.description-page {
		padding: 30rpx 30px 200rpx;
	}

	.doctor-online {
		display: flex;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #ededed;

		.doctor-avatar {
			width: 110rpx;
			height: 110rpx;
		}

		.doctor-info {
			flex: 1;
			margin-left: 20rpx;
		}

		.name {
			line-height: 1;
			padding-left: 20rpx;
			font-size: 32rpx;
			color: #121826;
		}

		.message {
			line-height: 1.5;
			padding: 20rpx;
			margin: 20rpx 0;
			color: #6f6f6f;
			font-size: 26rpx;
			border-radius: 20rpx;
			background-color: #f6f6f6;
		}

		.tips {
			display: flex;
			align-items: center;
			color: #6f6f6f;
			font-size: 24rpx;
		}

		.icon-shield {
			font-size: 28rpx;
			margin-right: 5rpx;
		}
	}

	.patient-info {
		margin-top: 30rpx;

		.description {
			width: 100%;
			height: 240rpx;
			padding: 30rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			color: #121826;
			background-color: #f6f6f6;
		}

		.title {
			margin: 30rpx 0 10rpx;
			font-size: 28rpx;
			color: #3c3e42;
		}

		.tags {
			display: flex;
			flex-wrap: wrap;

			.tag {
				line-height: 1;
				padding: 16rpx 20rpx 14rpx;
				margin: 20rpx 20rpx 20rpx 0;
				font-size: 26rpx;
				border-radius: 10rpx;
				color: #3c3e42;
				border: 1rpx solid transparent;
				background-color: #f6f6f6;

				&.active {
					color: #2cb5a5;
					border-color: #2cb5a5;
					background-color: rgba(44, 181, 165, 0.1);
				}
			}
		}
	}

	.patient-picture {
		margin-top: 30rpx;

		:deep(.uni-file-picker__header) {
			padding-top: 0;
			padding-bottom: 30rpx;
		}

		:deep(.file-title) {
			font-size: 28rpx;
			color: #3c3e42;
		}

		:deep(.file-count) {
			font-size: 28rpx;
		}

		:deep(.file-picker__box-content) {
			background-color: #f6f6f6;
			border: none !important;
			border-radius: 10rpx !important;
		}

		:deep(.icon-add) {
			width: 60rpx;
			height: 4rpx;
			background-color: #ccc;
		}

		:deep(.icon-del-box) {
			right: -3px !important;
			top: -3px !important;
			background-color: rgba(0, 0, 0, 0.3) !important;
			transform: scale(0.6) rotate(-45deg) !important;
		}
	}

	.next-step {
		position: sticky;
		right: 0;
		left: 0;
		bottom: env(safe-area-inset-bottom);
		z-index: 100;
		padding: 30rpx 40rpx;
		background-color: #fff;
	}
</style>
